<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<script type="text/javascript">
    /**
     * 自定义验证规则
     */
    function validateAddOrEditForm(){
        $("#formAddOrEdit").bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {message: "标题不可为空"},
                        stringLength: {max: 40,message: "标题最大长度为40"}
                    }
                },
                sortIndex: {
                    validators: {
                        notEmpty: {message: "菜单排序不可为空"},
                        stringLength: {max: 2,message: "菜单排序最大长度为2"},
                        numeric: {
                            message: '只能输入数字'
                        }
                    }
                },
                eventTypeValue: {
                    validators: {
                        notEmpty: {message: "菜单KEY值不可为空"},
                        stringLength: {max: 50,message: "菜单KEY值最大长度为50"},
                        regexp: {
                            regexp: validateUtil.onlyCharAndNumber,
                            message: '只能填写字母或者数字'
                        }
                    }
                },
                viewTypeValue: {
                    validators: {
                        notEmpty: {message: "菜单URL值不可为空"},
                        stringLength: {max: 256,message: "菜单URL值最大长度为256"},
                        regexp: {
                            regexp: validateUtil.webUrl,
                            message: '请输入有效的网址'
                        }
                    }
                }
            }
        });
    }

    /**
     * 新增一级微信菜单
     */
	<shiro:hasPermission name="back_gotoMenuInfoPage_addFirst">
    function addInfo(){
        /** 重置表单 **/
        $("#formAddOrEdit")[0].reset();
        $.ajax({
            type: "POST",
            async:false,
            dataType: "JSON",
            url: "${basePath}/back/wx/menuInfo/queryFirstMenuNo.sjson",
            success: function(result) {
                var data = JSON.parse(result.data);
                if (data.count < 3) {
                    $("#myModalLabel").empty().text("新增一级微信菜单");
                    $("#btn_add").attr("data-target","#addOrEditModal");/**条件符合才可打开对应的模态框**/
                    /**清空隐藏域的值**/
                    $("#wxmiId").val("");
                    $("#publicNumberId").val("1");
                    $("#parentId").val(0);
                    $("#parentName").val("根菜单");
                    $("#isOwnerSecondLevel").val("1");//默认1级菜单拥有2级菜单
                    $("#createTime").val("");
                    $("#modifier").val("");
                    $("#lastUpdateDate").val("");
                    /**赋默认值**/
                    changeInput("click");
                } else {
                    $("#btn_add").attr("data-target","");/**条件不符不可打开对应的模态框**/
                    showMsg("一级菜单下子菜单不能超过3个！");
                }
			}
		})
    }
	</shiro:hasPermission>

    /**
     * 新增二级微信菜单
     */
    function addSubMenu(wxmiId,index){
        /** 重置表单 **/
        $("#formAddOrEdit")[0].reset();
        $.ajax({
            type: "POST",
			async:false,
            dataType: "JSON",
            url: "${basePath}/back/wx/menuInfo/querySecondMenuNo.sjson",
            data: {parentId:wxmiId,wxmiId:wxmiId},
            success: function(result) {
                var data = JSON.parse(result.data);
                if (data.count < 5) {
                    $("#myModalLabel").empty().text("新增二级微信菜单");
                    $("#btn_addSubMenu_"+index).attr("data-target","#addOrEditModal");/**条件符合才可打开对应的模态框**/
                    /**清空隐藏域的值**/
                    $("#wxmiId").val("");
                    $("#publicNumberId").val("1");
                    $("#parentId").val(wxmiId);
                    $("#parentName").val(data.list[0].name);
                    $("#isOwnerSecondLevel").val("0");
                    $("#createTime").val("");
                    $("#modifier").val("");
                    $("#lastUpdateDate").val("");
                    /**赋默认值**/
                    changeInput("click");
                } else {
                    $("#btn_addSubMenu").attr("data-target","");/**条件不符不可打开对应的模态框**/
                    showMsg("二级菜单下子菜单数量不能超过5个！");
                }
            }
        });
    }

    /**
     * 编辑当前微信菜单信息
     */
    function editMenu(wxmiId,index){
        $("#myModalLabel").empty().text("编辑当前微信菜单信息");
        $("#btn_edit_"+index).attr("data-target","#addOrEditModal");/**打开对应的模态框**/
        /** 重置表单 **/
        $("#formAddOrEdit")[0].reset();
        $.ajax({
            type: "POST",
            async:false,
            dataType: "JSON",
            url: "${basePath}/back/wx/menuInfo/getMenuInfoObject.sjson",
            data: {wxmiId:wxmiId},
            success: function(result){
                var data = JSON.parse(result.data);
                /**隐藏域**/
                $("#wxmiId").val(data.wxmiId);
                $("#publicNumberId").val(data.publicNumberId);
                $("#parentId").val(data.parentId);
                $("#parentName").val(data.parentName);
                $("#isOwnerSecondLevel").val(data.isOwnerSecondLevel);
                $("#createTime").val(new Date(data.createTime).Format("yyyy-MM-dd hh:mm:ss"));
                $("#modifier").val(data.modifier);
                if (data.lastUpdateDate!=""&&data.lastUpdateDate!=undefined){
					$("#lastUpdateDate").val(new Date(data.lastUpdateDate).Format("yyyy-MM-dd hh:mm:ss"));
				}
                /**可见表单控件**/
                $("#name").val(data.name);
                $("#sortIndex").val(data.sortIndex);
                $("#type_"+data.type).attr("checked","checked");
                if (data.type=="click"){
                    $("#keyInput").val(data.typeValue);
				}else if (data.type=="view"){
                    $("#urlInput").val(data.typeValue);
                }
                changeInput(data.type);/**选择click或view**/
            }
        });
    }

    /**
     * 表单提交及验证初始化
     */
    $(document).ready(function() {
        if($("#formAddOrEdit").length>0){ /**判断当前页面是否有填写表单并检验**/
        	validateAddOrEditForm();
            /**Modal验证销毁重构**/
            $('#addOrEditModal').on('hidden.bs.modal', function() {
                reValidateForm();
            });
        }
    });

    /**
     * 重置表单验证
     */
    function reValidateForm(){
        $("#formAddOrEdit").data('bootstrapValidator', null);
        validateAddOrEditForm();
    }

    /**
     * 表单异步提交
     */
    var isValid;
    function submitAddOrEditForm(){
        /** 开启验证**/
        $("#formAddOrEdit").data('bootstrapValidator').validate().validate();
        isValid=$("#formAddOrEdit").data('bootstrapValidator').isValid();
        if(isValid){  /** 验证通过后提交表单**/
        if ($("#keyInput").val()!=""){
            $("#urlInput").val("");
            $("#typeValue").val($("#keyInput").val());
		}else if($("#urlInput").val()!=""){
            $("#keyInput").val("");
            $("#typeValue").val($("#urlInput").val());
		}
        var options = {
                url: $("#formAddOrEdit").attr("action"),
                type : "post",
                dataType:"json",
                success : function(data) {
                    if(data.success==true){
                        /** 重新刷新页面数据**/
                        initMenuInfo();
                        /** 自动关闭弹出模态框窗口**/
                        $(".close").click();
                        showMsg("保存成功！");
                    }else{
                        showMsg("保存失败！");
                    }
                }
            };
            $("#formAddOrEdit").ajaxSubmit(options);
        }else{ /** 验证失败了直接返回 **/
            return false;
        }
    }

    /**选择click或view**/
    function changeInput(value){
        if(value=="click"){
            $("#key").show();
            $("#keyInput").removeAttr("disabled");
            $("#url").hide();
            $("#urlInput").attr("disabled",true);
        }else if(value=="view"){
            $("#key").hide();
            $("#keyInput").attr("disabled",true);
            $("#url").show();
            $("#urlInput").removeAttr("disabled");
        }
    }

</script>

<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" >
	<div class="modal-dialog" style="width:70%">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h5 class="modal-title" id="myModalLabel"></h5>
			</div>
			<div class="modal-body">
				<form id="formAddOrEdit"  method="post" action="${basePath}/back/wx/menuInfo/saveOrUpdateMenuInfo.sjson">
					<input id="wxmiId" type="hidden" name="wxmiId" noclear="true"/>
					<input id="publicNumberId" type="hidden" name="publicNumberId" noclear="true"/>
					<input id="parentId" type="hidden" name="parentId" noclear="true"/>
					<input id="parentName" type="hidden" name="parentName" noclear="true"/>
					<input id="typeValue" type="hidden" name="typeValue" noclear="true"/>
					<input id="isOwnerSecondLevel" type="hidden" name="isOwnerSecondLevel" noclear="true"/>
					<input id="createTime" type="hidden" name="createTime" noclear="true"/>
					<input id="modifier" type="hidden" name="modifier" noclear="true"/>
					<input id="lastUpdateDate" type="hidden" name="lastUpdateDate" noclear="true"/>
					<table align="center" class="addOrEditTable table-bordered table" style="width:100%;">
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>标题:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="name" name="name" placeholder="请输入标题"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>菜单排序:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="sortIndex" name="sortIndex" placeholder="请输入菜单排序"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>菜单类型:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<label class="checkbox-inline">
									<input type="radio" name="type" id="type_click" class="radioInput" value="click" onclick="changeInput(this.value)"  checked="checked">&nbsp;&nbsp;点击事件（click）
								</label>
								<label class="checkbox-inline">
									<input type="radio" name="type" id="type_view" class="radioInput" value="view" onclick="changeInput(this.value)">&nbsp;&nbsp;视图（view 例：http://www.xxx.com）
								</label>
							</td>
						</tr>
						<tr id="key" style="display:none;">
							<td class="toright_td" width="150px"><span style="color:red">* </span>菜单KEY值:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="keyInput" name="eventTypeValue" placeholder="请输入菜单KEY值" disabled/>
								</div>
							</td>
						</tr>
						<tr id="url" style="display:none;">
							<td class="toright_td" width="150px"><span style="color:red">* </span>菜单URL值:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="urlInput" name="viewTypeValue" placeholder="请输入菜单URL值" disabled/>
								</div>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="validateBtn" class="btn btn-primary"  onclick="submitAddOrEditForm()">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
